import { Button, Container, Dropdown, Form, FormGroup, Modal, Nav, Table } from 'react-bootstrap'
import proposals from '../store/proposals'
import { observer } from 'mobx-react-lite'
import '../styles/statusColors.scss'
import { Navigate, useNavigate } from 'react-router-dom'
import auth from '../store/auth'
import auto from '../store/auto'
import { useState } from 'react'
import { MakeAutoData, MakePersonData, MakeProposalData, Validated } from '../dtos'

function HandleClick(handleClose: () => void) {
    const data = MakeProposalData(
        '',
        'DRAFT',
        auto.city[1],
        MakeAutoData(auto.category[1], auto.model[1]),
        MakePersonData(
            document.getElementById('firstName')?.value,
            document.getElementById('lastName')?.value,
            document.getElementById('driverLicense')?.value,
            document.getElementById('email')?.value
        )
    )
    const validate = Validated(data)
    if (validate) alert('неверно заполнено:\n' + validate)
    else {
        proposals.Add(data)
        proposals.SetProposals()
        handleClose()
    }
}

export const ProposalsPage = observer(() => {
    if (!auth.isLogIn) return <Navigate to='/home' />
    if (proposals.list[0] == undefined) proposals.SetProposals()
    if (auto.categories[0] == undefined) auto.SetCategories()
    if (auto.cities[0] == undefined) auto.SetCities()

    const navigate = useNavigate()
    const [show, setShow] = useState(false)
    const handleClose = () => setShow(false)
    const handleShow = () => setShow(true)

    return (
        <Container>
            <br />
            <Nav>
                <Dropdown className='pe-2'>
                    <Dropdown.Toggle variant='dark'>Сортировка</Dropdown.Toggle>
                    <Dropdown.Menu>
                        <Dropdown.Item onClick={() => proposals.SortBy(0)}>Статус</Dropdown.Item>
                        <Dropdown.Item onClick={() => proposals.SortBy(1)}>ID</Dropdown.Item>
                        <Dropdown.Item onClick={() => proposals.SortBy(2)}>Город</Dropdown.Item>
                        <Dropdown.Item onClick={() => proposals.SortBy(3)}>Марка и модель</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
                <Button variant='dark' onClick={handleShow}>
                    Создать новую
                </Button>
            </Nav>
            <br />
            <Table bordered hover>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Город</th>
                        <th>Машина</th>
                    </tr>
                </thead>
                <tbody>
                    {proposals.list.map((i, k) => (
                        <tr
                            key={k}
                            className='clickable'
                            onClick={() => {
                                auto.category = ['', i[3].split(' ')[0]]
                                auto.models = []
                                auto.model = ['', i[3].split(' ')[1]]
                                auto.city = ['', i[2]]
                                navigate(k.toString())
                            }}
                        >
                            {i.map(
                                (j, k) =>
                                    k > 0 && (
                                        <td key={k} className={i[0].toLowerCase()}>
                                            {j}
                                        </td>
                                    )
                            )}
                        </tr>
                    ))}
                </tbody>
            </Table>
            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>Создание заявки</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Nav>
                        <Dropdown className='pe-2'>
                            <Dropdown.Toggle variant='dark'>{auto.category[0] || 'Марка'}</Dropdown.Toggle>
                            <Dropdown.Menu>
                                {auto.categories.map((i, k) => (
                                    <Dropdown.Item
                                        key={k}
                                        onClick={() => {
                                            auto.category = [i[0], i[1], i[2]]
                                            auto.SetModels(auto.category[2])
                                            auto.model = []
                                        }}
                                    >
                                        {i[0]}
                                    </Dropdown.Item>
                                ))}
                            </Dropdown.Menu>
                        </Dropdown>
                        <Dropdown className='pe-2 disabled'>
                            <Dropdown.Toggle variant='dark'>{auto.model[0] || 'Модель'}</Dropdown.Toggle>
                            <Dropdown.Menu id='model'>
                                {auto.models.map((i, k) => (
                                    <Dropdown.Item key={k} onClick={() => (auto.model = [i[0], i[1]])}>
                                        {i[0]}
                                    </Dropdown.Item>
                                ))}
                            </Dropdown.Menu>
                        </Dropdown>
                        <Dropdown>
                            <Dropdown.Toggle variant='dark'>{auto.city[0] || 'Город'}</Dropdown.Toggle>
                            <Dropdown.Menu>
                                {auto.cities.map((i, k) => (
                                    <Dropdown.Item key={k} onClick={() => (auto.city = [i[0], i[1]])}>
                                        {i[0]}
                                    </Dropdown.Item>
                                ))}
                            </Dropdown.Menu>
                        </Dropdown>
                    </Nav>
                    <Form>
                        <FormGroup className='mt-3'>
                            <Form.Label>Имя</Form.Label>
                            <Form.Control id='firstName' placeholder='Имя' defaultValue='Александр' />
                        </FormGroup>
                        <FormGroup className='mt-3'>
                            <Form.Label>Фамилия</Form.Label>
                            <Form.Control id='lastName' placeholder='Фамилия' defaultValue='Перьков' />
                        </FormGroup>
                        <FormGroup className='mt-3'>
                            <Form.Label>Номер водительской лицензии</Form.Label>
                            <Form.Control id='driverLicense' placeholder='Номер лицензии' defaultValue='2321 245678' />
                        </FormGroup>
                        <FormGroup className='mt-3'>
                            <Form.Label>Адрес электронной почты</Form.Label>
                            <Form.Control
                                id='email'
                                placeholder='Email'
                                defaultValue='amp.sasha@gmail.com'
                                type='email'
                            />
                        </FormGroup>
                    </Form>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant='dark' onClick={handleClose}>
                        Отмена
                    </Button>
                    <Button variant='dark' type='submit' onClick={() => HandleClick(handleClose)}>
                        Отправить
                    </Button>
                </Modal.Footer>
            </Modal>
        </Container>
    )
})
